<template>
  <!-- 底部部分 -->
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{ leftCount }}</strong></span>
    <!-- template中不写this -->
    <ul class="filters" @click="$emit('changeType',type)">
      <!-- 1.人为定义三个状态(自己定义):
      全部：修改
      进行中：active
      已完成：completed
      2.点击之后修改状态
      3.通过动态类名控制selected类名 -->
      <li>
        <a 
        @click.prevent="type='all'"
        :class="{selected:type==='all'}" href="#/">全部</a>
      </li>
      <li>
        <a 
        @click.prevent="type='active'"
       :class="{selected:type==='active'}"
        href="#/active">进行中</a>
      </li>
      <li>
        <a 
        @click.prevent="type='completed'"
        :class="{selected:type==='completed'}"
        href="#/completed">已完成</a>
      </li>
    </ul>
    <button @click="hClear" v-show="showClear" class="clear-completed">清除已完成</button>
  </footer>
</template>

<script>
export default {
  name: 'TodoFooter',
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      type:''
    };
  },
  methods: {
    hClear() {
      // 子传父, 交给父组件来删除已完成的任务
      // 不需要传递任何数据, 只需要让父组件帮忙清除所有已完成的任务即可
      // 理解为通知父组件干活了! 不用传递任何数据
      this.$emit('hClearDo')
    }
  },
  computed: {
    leftCount() {
      return this.list.length
    },
    showClear() {
      // 循环获取 list 中所有元素的 isDone 状态
      // 只要有一个是 true 就返回 true
      return this.list.some(item => item.isDone)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>